<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>菜单管理</title>
    <script src="../js/vue/dist/vue.min.js"></script>
    <script src="../js/element-ui/lib/index.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/web-util.js"></script>
    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        .el-row{
            margin-bottom: 20px;
        }
        .el-tree{
            border: 1px solid #DCDFE6;
            margin-right: 5px;
        }
        .el-main{
            padding: 0;
        }
        body{
            height: 85%;
            margin: 10px;
            background: #ffffff;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-container >
            <el-aside width="250px">
                <el-tree :data="treeData" ref="treeData" :props="treeProps" @node-click="handleNodeClick" node-key="menuCode"
                         :highlight-current="true" :expand-on-click-node="false" default-expand-all></el-tree>
            </el-aside>
            <el-main>

                <el-tabs type="border-card">
                    <el-tab-pane label="菜单">

                        <el-row>
                            <el-col :span="24">
                                <el-button type="primary" icon="el-icon-plus" @click="showEditDialog()" size="small">新增菜单</el-button>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-table ref="tableData" v-loading="loading" :data="tableData" row-class-name="row_padding" header-row-class-name="head_padding" highlight-current-row border style="width: 100%">
                                    <el-table-column label="菜单名称" prop="menuName"  fixed="left" header-align="center" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="菜单编码" prop="menuCode"  header-align="center" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="链接地址" prop="url"  align="center" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="序号" prop="menuOrder"  align="center" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="状态" prop="businessFlag"  align="center">
                                        <template slot-scope="scope">
                                            <span v-html="showBusinessStatusImage(scope.row.businessFlag)" @click="updateBusinessStatus(scope.row)"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" fixed="right"  header-align="center" align="center">
                                        <template slot-scope="scope">
                                            <el-button @click.native.prevent="showEditDialog(scope.row)" type="text" size="small">
                                                编辑
                                            </el-button>
                                            <el-button @click.native.prevent="deleteMenu(scope.row)" type="text" size="small">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>

                        <el-dialog title="菜单详情" :visible.sync="formVisible" @close="handleDialogClose" width="600px" >
                            <el-form ref="menuFormRef" :model="menuForm" :rules="formRules" label-width="150px" label-position="right">
                                <el-form-item label="菜单名称" prop="menuName" required>
                                    <el-input v-model="menuForm.menuName" placeholder="请输入菜单名称" style="width: 300px" :maxlength="100" :disabled="formRead" ></el-input>
                                </el-form-item>
                                <el-form-item label="菜单编码" prop="menuCode" required>
                                    <el-input v-model="menuForm.menuCode" placeholder="请输入菜单编码" style="width: 300px" :maxlength="100" :disabled="formRead" ></el-input>
                                </el-form-item>
                                <el-form-item label="链接地址" prop="url" required>
                                    <el-input v-model="menuForm.url" placeholder="请输入链接地址" style="width: 300px" :maxlength="100" :disabled="formRead" ></el-input>
                                </el-form-item>
                                <el-form-item label="序号" prop="menuOrder" required>
                                    <el-input v-model="menuForm.menuOrder" placeholder="请输入序号" style="width: 300px" :maxlength="100" :disabled="formRead" ></el-input>
                                </el-form-item>
                                <el-form-item label="仅超级管理员可见" prop="onlyForSuper" required>
                                    <el-radio-group v-model="menuForm.onlyForSuper" size="medium">
                                        <el-radio-button label="1" >是</el-radio-button>
                                        <el-radio-button label="0">否</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input v-model="menuForm.remark" type="textarea" :rows="3" placeholder="请填写菜单相关的描述" style="width: 300px"  :maxlength="50" :disabled="formRead"></el-input>
                                </el-form-item>

                                <el-form-item label-width="0" style="text-align: center">
                                    <el-button type="primary" @click="save()" size="small">保存</el-button>
                                </el-form-item>
                            </el-form>

                        </el-dialog>
                    </el-tab-pane>
                </el-tabs>

            </el-main>
        </el-container>
    </template>
</div>
</body>
<script src="MenuList.js" type="text/javascript"></script>
</html>

